<template>
  <v-layout title="其他收入修改">
    <el-row type="flex" justify="center" class="confirm">
      <el-col :xl="14" :lg="18" :md="20" :sm="24" :xs="24">
        <div class="order-status">{{orderStatus}}</div>
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="100px"
        />
          <el-card class="mt15">
          <el-form inline label-width="100px">
            <el-form-item label="收款" size="mini">
              <el-input :disabled="true" v-model="wlReceipt" placeholder="123"/>
            </el-form-item>
            <el-button type="primary" size="mini" @click="showWlTable=!showWlTable">{{showWlTable?'收起':'展开'}}明细
            </el-button>
            <el-button type="primary" size="mini" @click="addWlReceipt">添加收款</el-button>
          </el-form>
          <el-collapse-transition>
            <div v-show="showWlTable">
              <v-table
                :select="false"
                :table-title="wlReceiptTableTitle"
                :table-data="wlReceiptTableData"
                :default-operate="financeRole"
                btn-class="btn"
                @del="delWl"
                @edit="editWl"
              />
            </div>
          </el-collapse-transition>
<!--          <div class="pdt15">-->
<!--            <v-form-->
<!--              :form-title="wlInvoiceTitle"-->
<!--              :form-data="formData"-->
<!--              label-width="120px"-->
<!--            />-->
<!--          </div>-->
     </el-card>

        <el-row v-if="financeRole" type="flex" justify="end" class="mt15">
          <el-button type="primary" size="small" @click="confirm"> 确定</el-button>
        </el-row>
      </el-col>
    </el-row>



    <!--添加/修改微萊收款-->
    <el-dialog :visible.sync="dialogVisible" title="添加/修改收款" width="30%">
      <el-form label-width="120px" size="mini">
        <el-form-item label="收款金额">
          <el-input v-model="addWlReceiptData.money"/>
        </el-form-item>
        <el-form-item label="收款账户">
          <el-input v-model="addWlReceiptData.bank_account"/>
        </el-form-item>
<!--        <el-form-item label="收款银行">-->
<!--          <el-input v-model="addWlReceiptData.bank"/>-->
<!--        </el-form-item>-->
        <el-form-item label="收款时间">
          <el-date-picker
            v-model="addWlReceiptData.create_date"
            value-format="yyyy-MM-dd"
            type="date"/>
        </el-form-item>
        <el-form-item label="发票号">
          <el-input v-model="addWlReceiptData.bill_num"/>
        </el-form-item>
        <el-form-item label="开票公司">
          <el-input v-model="addWlReceiptData.bill_company"/>
        </el-form-item>
        <el-form-item label="开票金额">
          <el-input v-model="addWlReceiptData.bill_price"/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" @click="modifyReceiptRecord">确定</el-button>
      </el-row>
    </el-dialog>
  </v-layout>
</template>

<script>
import { parseTime } from '@/utils'
import auth from '@/mixins/auth'

export default {
  mixins: [auth],
  data() {
    return {
      ad_id: 0,
      index: false, // 编辑微萊收款
      showWlTable: true,
      formData: {},
      // 公众号列表
      tencentList: [],

      swList: [],

      addUrl: 'url', // 添加收款的地址
      // 开票公司列表
      companyList: [],

      addWlReceiptData: {},

      orderStatus:'',
      dialogVisible:false,
      msg:'',
      wlReceiptTableData: [],
      wlReceiptTableTitle: [
          // {
          //     cn: 'id',
          //     en: 'id',
          // },
          {
            cn: '收款',
            en: 'money'
          },
          {
            cn: '收款账户',
            en: 'bank_account'
          },
          // {
          //   cn: '收款银行',
          //   en: 'bank'
          // },
          {
            cn: '收款时间',
            en: 'create_date'
          },
           {
            cn: '发票号',
            en: 'bill_num',
            // disabled: !this.financeRole
          },
          {
            cn: '开票公司',
            en: 'bill_company',
            // type: 'autocomplete',
            // disabled: !this.financeRole,
            // list: this.companyList
          },
          {
            cn: '开票金额',
            en: 'bill_price',
            // disabled: !this.financeRole
          },
          {
            cn: '修改时间',
            en: 'update_date'
          }
        ],
    }
  },
  computed: {
      //   wlInvoiceTitle() {
      //   return ([
      //     {
      //       cn: '发票号',
      //       en: 'bill_num',
      //       // disabled: !this.financeRole
      //     },
      //     {
      //       cn: '开票公司',
      //       en: 'bill_company',
      //       type: 'autocomplete',
      //       // disabled: !this.financeRole,
      //       list: this.companyList
      //     },
      //     {
      //       cn: '收款银行',
      //       en: 'receive_bank',
      //       // disabled: !this.financeRole
      //     },
      //     {
      //       cn: '收款账户',
      //       en: 'receive_account',
      //       // disabled: !this.financeRole
      //     },
      //     {
      //       cn: '开票金额',
      //       en: 'real_price',
      //       // disabled: !this.financeRole
      //     },
      //     {
      //       cn: '收款时间',
      //       en: 'receive_at',
      //       type: 'datetime',
      //       // disabled: !this.financeRole
      //     }
      //
      //   ])
      // },
     wlReceipt() {
        let data = 0
        this.wlReceiptTableData && this.wlReceiptTableData.forEach(item => {
          data += (+item.money || 0)
        })
        return data || 0
      },
    formTitle() {
      return ([
          {
            cn: 'id',
            en: 'id',
            disabled: true
            // sortable: true
          },
          {
            cn: '登记人',
            en: 'name',
            disabled: true
            // sortable: true
          },
          {
            cn: '项目类型',
            en: 'project_type',
               type: 'select',
            list: [
              {
                label: '代运营',
                value: '代运营'
              },
              {
                label: '线下活动',
                value: '线下活动'
              },
                 {
                label: 'TVC视频',
                value: 'TVC视频'
              }
            ]
            // sortable: true
          },
          {
            cn: '客户公司全称',
            en: 'client_company_full_name',
            // sortable: true
          },{
            cn: '客户公司简称',
            en: 'client_company_abbreviation',
            // sortable: true
          },
          {
            cn: '我方公司合同主体',
            en: 'subject_of_contract'
          },
          {
            cn: '项目起始日期',
            en: 'start_date',
              type: 'time',
          },
          {
            cn: '项目终止日期',
            en: 'end_date',
              type: 'time',
          },
          {
            cn: '合同金额',
            en: 'contract_amount',
            // sortable: true,
           type: 'money'
          },
          {
            cn: '代运营项目',
            en: 'agent_operation_type',
            // sortable: true
          },
          {
            cn: '分期月数',
            en: 'months_by_stages',
            // sortable: true
          },
          {
            cn: '采购成本',
            en: 'procurement_cost' ,
           type: 'money'
          },
           {
            cn: '备注',
            en: 'remarks' ,

          },
      ])
    },

  },
  activated() {
    const {details} = this.$route.query
    this.ad_id = JSON.parse(details).id
    // if(details){
    //   this.formData = JSON.parse(details)
    //  }
    this.getOrderDetail()
    // this.getCompanyList()
  },
  methods: {
  // 获取开票公司列表
      getCompanyList() {
        // let data = {id:this.fans_id};
        this.$post('action/InvoiceInformation/find')
          .then(res => {
            this.companyList = res.data.map(item => {
              const obj = {}
              obj.label = item.开票公司名称
              obj.value = item.开票公司名称
              return obj
            })
          })
      },
   addWlReceipt() {
        this.addWlReceiptData = {}
        this.showDialog ()
      },
    showDialog(){
      this.dialogVisible = true
    },
    // 撤销修改
    reject() {
      this.check(1)
    },
    cancel() {
      this.dialogVisible = false
    },
    // 确认修改广告订单
    confirm() {
      this.check(2)
    },

    check(status){
      const data = this.formData

      if(status===1){
        data.msg = this.msg
      }
      this.$post('action/OtherIncome/update', data)
        .then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
          setTimeout(()=>this.$router.go(-1),1000)
            this.cancel()

        })
    },
      delWl(val) { // 删除微萊收款信息
        const data = { id: val.row.id }
        this.$post('action/OtherIncome/receiptrecord_del', data)
          .then(res => {
            this.getOrderDetail()
            this.$message({ message: res.msg, type: 'success' })
          })
      },
      editWl(val) { // 修改微萊收款信息
        this.index = val.$index
        this.addWlReceiptData = this.$deepClone(val.row)
        this.showDialog ()
      },

      // 新增/修改广告订单收款记录
      modifyReceiptRecord(val) {
        const data = {
          adv_id: this.ad_id,
          ...this.addWlReceiptData,
          update_date: parseTime(new Date())
        }
        this.$post('action/OtherIncome/receiptrecord_save', data)
          .then(res => {
            this.$message({ message: res.msg, type: 'success' })
            if (this.addWlReceiptData.id) {
              this.$set(this.wlReceiptTableData, this.index, data)
            } else {
              this.getOrderDetail()
            }
            this.index = 0
            this.cancel()
          })
      },

       // 获取广告订单详情
      getOrderDetail() {
        const data = {
          ad_id: this.ad_id
        }
        this.$get('action/OtherIncome/qryOp', data)
          .then(res => {
            this.formData = res.data.Advs || {}
            this.wlReceiptTableData = res.data.receiptrecord
          })
          .catch(err => {
            console.log(err)
            this.$router.go(-1)
          })
      },


  }
}
</script>

<style scoped>
.order-status{
  margin-bottom: 16px;
  font-size: 24px;
}
</style>
